<template>
	<div>
		<div class="other-banner">
			<img src="../assets/image/desbanner.jpg" alt="">
		</div>
		<div class="company-box" style="padding-top: 40px;background:#fafafa;">
			<div class="search-box">
				<div class="search-title">
					<router-link tag='a' :to="'/index'" >首页</router-link> >
					<a>设计师</a>
				</div>
<!-- 				<div class="search-li">
					<span>热门城市：</span>
					<ul class="search-type">
						<li class="cur">全部</li>
						<li>长沙</li>
						<li>湘潭</li>
					</ul>
				</div> -->
				<div class="search-li">
					<span>擅长风格：</span>
					<ul class="search-type">
						<li @click="getStyle('0')" :class="[keyid == 0? 'cur': '']">全部</li>
						<li @click="getStyle(item.key)" v-for="(item, index) in styleData" :class="[item.key == keyid? 'cur': '']" :key="index">{{item.value}}</li>
					</ul>
				</div>
			</div>
			<div class="wrap-design-two">
				<div class="det-pub" v-for="(item, index) in designData" :key="index" @click="$axios.goDesign(item.designerIndex)">
					<img :src="item.headImage">
					<div class="det-text">
						<p class="det-text-name">{{item.name}}</p>
						<p class="det-text-say">{{item.describe}}</p>
						<p class="det-text-good">擅长风格：{{item.strongs}}</p>
					</div>
				</div>
			</div>

			<div class="page" style="text-align:center;margin-top:20px;" v-if="total >= pagelimit">
      	<el-pagination
      	  background
      	  layout="prev, pager, next"
      	  @current-change="handleCurrentChange"
      	  :page-size="pagelimit"
      	  :total="total">
      	</el-pagination>
    	</div>

		</div>
	</div>
</template>

<script>
export default {
  data () {
    return {
      styleData: [],
      designData: [],
      strong: '0',
      pageindex: 0,
      pagelimit: 5,
      total : '',
      keyid: '0'
    }
  },
  methods: {
  	getType () {
  		var that = this
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 2
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.styleData = res.data.items
  				}
  			})
  	},
  	handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getDesign()
    },

  	getDesign () {
  		var that = this
  		that.$axios.request('/CompanyDesigner/Index', {
  			Address: that.$store.state.city,
  			Strong: that.strong,
  			Pageindex: that.pageindex,
  			Pagelimit: that.pagelimit
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.designData = res.data.dataList
  					that.total = res.data.total
  					for (var i = 0; i < that.designData.length; i++) {
  						that.designData[i].strongs = that.designData[i].strongs.join('、')
  					}
  				}
  			})
  	},
  	goDesign: function(key) {
  		this.$axios.goDesign(key)
  	},
  	getStyle: function(key) {
  		var that = this
  		that.strong = key
  		that.keyid = key
  		that.getDesign()
  	}
  },
  mounted () {
    var that = this
  	that.getType()
    that.$axios.getCity(function(){
      that.getDesign()
    })
  }
}
</script>
